---
import '../../../styles/thread.css';
import '../../../styles/blackbox.css';

import ThreadLayout from '../../../layouts/ThreadLayout.astro';
import Thread from '../../../components/Thread.astro'
import type Thread from '../../../models/Thread';;

import { api } from '../../../lib/api';
import { processThreadIn } from '../../../lib/thread';

const { board, tid } = Astro.params;
const data = await api('get', `board/${board}/${tid}`);

if(data.status === 404) return Astro.redirect('/404');

const thread: Thread = await data.json();
processThreadIn(board, thread);
---

<ThreadLayout>
  <h1 style="text-align:center">
    <a href=`/board/${board}`>{board}</a>
  </h1>

  <div class="blackbox">
    <button style="left: 50%; position: relative; transform: translate(-50%, 0);" onclick=`window.open('/create/${board}/${tid}','popUpWindow','height=500,width=600')`>
      Create Comment
    </button>
  </div>

  <Thread thread={thread} board={board} comments=true />
</ThreadLayout>